import React, { memo,useState,useCallback,useEffect } from 'react'
import { CSSTransition } from 'react-transition-group'
import { useNavigate } from 'react-router-dom';
import { Container,ShortcutWrapper,HotKey,List } from './style'
import SearchBox from '@/components/common/search-box'
import { connect } from 'react-redux'
import { Dispatch } from 'redux'
import { rootState } from '@/store'
import { swiperType } from '@/models/swiper'
import { rankList } from '@/models/search'
import { 
    getCitiesDataAction
} from '@/store/actionCreators'
// import { 
//     getSearchDataAction,
//     getSearchSuggest,
//     clearSearchHistory,
//     getSearchResult
// } from '@/store/actionCreators/search'
import { Tabs } from 'antd-mobile'
import { formatTenThousand } from '@/utils/index'
import CardInfo from '@/components/cardInfo'

interface SearchProps {
    cities:string[];
    model:boolean;
    searchHistory:string[];
    swipers:swiperType[];
    loading:boolean;
    hotkey:rankList[];
    suggestList:any[];
    resultList:any
    getSearchDataActionDispatch:()=>void;
    getSearchSuggestDispatch:(query:string)=>void;
    clearSearchHistoryDispatch:()=>void;
    getSearchResultDispatch:(data:string)=>void;
    getCitiesDataActionDispatch:()=>void;
}

const Search:React.FC<SearchProps> = (props) => {
    const navigate = useNavigate()
    const { 
        cities,
        suggestList,
    } = props
    const { 
        getCitiesDataActionDispatch,
        clearSearchHistoryDispatch,
     } = props
    const [show,setShow] = useState(false);
    const [query,setQuery] = useState<string>('');
    const [showres,setShowres] = useState(false)
    // 退出搜索页面
    const searchBack = useCallback(()=> {
        setShow(false)
    },[])

    const handleQuery = (q:string)=>{
        setQuery(q)
    }
    
    // 根据key搜索
    const dosearch = (key:string) => {
        setQuery(key)
        setShowres(true)
    }

    const onfocus = () => {
        setShowres(false)
    }

    useEffect(() => {
        setShow(true);
        setShowres(false);
        // 加载页面数据
        if(!cities.length) {
            getCitiesDataActionDispatch();
        }
    },[])

    // 请求搜索建议数据
    useEffect(() => {
        if(query.trim()){ 
            // 有必要去请求
            // getSearchSuggestDispatch(query);
        }
        if(query==''){
            setShowres(false)
        }
    },[query])

    const hotkeyContent = () => {
        return cities.length ?
        <div>
            { 
              cities.map((item) => {
                return (
                    <List
                        className="item"
                        key={item.id}
                        onClick={() => setQuery(item.city)}
                    >
                        <span>{item.city}</span>
                    </List>
                )
              }
                
              )
            }
        </div>
         : null     
      }

    return (
        <CSSTransition
                in={show}
                timeout={300}
                appear={true}
                classNames="fly"
                unmountOnExit
                onExit={() => {navigate(-1)}}
            >
        <Container 
        // model={model}
        >
            <div className='searchBar'>
                    <SearchBox 
                        // model={model}
                        handleQuery={handleQuery}
                        newQuery={query}
                        handleEnterKey={dosearch}
                        onfocus={onfocus}
                    />
                    <span onClick={searchBack}>取消</span>
            </div>
            <ShortcutWrapper show={!showres&&query==''}>
                <HotKey  
                >
                    { hotkeyContent() }
                </HotKey>
            </ShortcutWrapper>
            <ShortcutWrapper show={!showres&&query!==''}>
                {/* { suggestElement() } */}
            </ShortcutWrapper>
            <ShortcutWrapper show={showres&&query!==''} 
            // model={model}
            >
                <h2>搜索结果：</h2>
            </ShortcutWrapper>
        </Container>
        </CSSTransition>
    )
}

const mapStatetoProps = (state:rootState) => ({
    cities:state.MainCities.cities,
  })
const mapDispatchToProps = (dispatch:Dispatch) => ({
    getCitiesDataActionDispatch(){
        dispatch<any>(getCitiesDataAction())
      },
})
export default connect(mapStatetoProps,mapDispatchToProps)(memo(Search))